<template>
  <view class=" w-full relative">
    <u-navbar title="我的" :is-back="false" :background="{ backgroundColor:'#9CE0FF'}" :border-bottom="false" title-color="#000" title-size="37" />
    <view class="info margin-0-auto">
      <image class="mt-50 w-120 h-120 br-round" :src="avatar"></image>
      <text class="mt-50 fz-40 lh-56 font-bold">{{name || '-'}}</text>
      <text class="mt-10 fz-30 lh-42 color-888888 p-lr-40 text-center break-all">{{ (isNurse ? hospitalName : companyName) || '' }}</text>
    </view>
    <view class="mt-100 w-full p-lr-20 pb-20">
      <view class="flex align-center justify-between h-100 p-lr-20 bg-E9F8FF br-10 mb-30" @tap="handleToPwd">
        <view class="flex align-center">
          <image class="w-48 h-48" src="@/static/images/mine/password.png"></image>
          <text class="ml-20 fz-32 lh-33">修改密码</text>
        </view>
        <image class="w-14 h-28" src="@/static/images/common/toPath.png"></image>
      </view>
      <view class="flex align-center justify-between w-full h-100 p-lr-20 bg-E9F8FF br-10 mb-30" @tap="handleToBindWechat">
        <view class="flex align-center">
          <image class="w-48 h-48" src="@/static/images/mine/wechat.png"></image>
          <text class="ml-20 fz-32 lh-33">微信绑定/解绑</text>
        </view>
        <image class="w-14 h-28" src="@/static/images/common/toPath.png"></image>
      </view>
      <!--  #ifdef APP-IOS  -->
      <view class="flex align-center justify-between w-full h-100 p-lr-20 bg-E9F8FF br-10 mb-30" @tap="handleToBindApple" v-if="isIos">
        <view class="flex align-center">
          <image class="w-48 h-48" src="@/static/images/mine/apple.png"></image>
          <text class="ml-20 fz-32 lh-33">苹果绑定/解绑</text>
        </view>
        <image class="w-14 h-28" src="@/static/images/common/toPath.png"></image>
      </view>
      <!--  #endif  -->
      <view class="flex align-center justify-between w-full p-lr-20 bg-E9F8FF br-10">
        <image class="w-48 h-48" src="@/static/images/mine/feedback.png"></image>
        <view class="flex-1">
          <view class="h-100 w-full flex align-center justify-between">
            <text class="ml-20 fz-32 lh-33">开启分页</text>
            <u-switch :value="$store.getters.paginationUseful" @input="$store.commit('SET_USEFUL', $event)"/>
          </view>
          <view class="h-100 w-full flex align-center justify-between" v-if="$store.getters.paginationUseful">
            <text class="ml-20 fz-32 lh-33">每页设备数</text>
            <u-number-box bg-color="#E9F8FF"
                          :min="1"
                          :max="10"
                          :step="1"
                          :value="$store.getters.paginationPageSize"
                          @input="$store.commit('SET_PAGE_SIZE', $event)"/>
          </view>
        </view>
      </view>
      <view class="version-container text-center color-CCCCCC m-tb-40">{{version}}</view>

      <view class="lh-center w-600 h-80 bg-FF6262 br-10 margin-0-auto login-out-box" @click.stop="isStatusCheckModalShow = true">
        <text class="fz-30 lh-42 color-fff">退出登录</text>
      </view>
    </view>

    <u-modal v-model="isStatusCheckModalShow" :show-confirm-button="false" :show-title="false" border-radius="20"
             mask-close-able>
      <view class="w-full flex flex-column align-center p-lr-50">
        <view class="lh-center color-333 fz-30 fw-700 p-tb-42 border-bottom-CCCCCC w-full">确定退出登录吗?</view>
        <view class="flex align-center justify-center m-tb-50">
          <view class="border-2D8CF0 w-120 h-60 border-box color-2D8CF0 fz-28 text-center lh-60 br-5 mr-50"
                @tap="isStatusCheckModalShow = false">
            <text>取消</text>
          </view>
          <view class="bg-2D8CF0 w-120 h-60 color-fff fz-28 text-center lh-60 br-5" @tap="handleLogout">
            <text>确定</text>
          </view>
        </view>
      </view>
    </u-modal>
    <CustomUTabbar></CustomUTabbar>
  </view>
</template>

<script>
  import CustomUTabbar from '../components/CustomUTabbar'
  import {getUserProfile} from "@/api/system/user";
  import { suffix } from '@/config.js'
  import manifest from '@/manifest.json'

  const systemInfo = uni.getSystemInfoSync()
  export default {
    components: {CustomUTabbar},
    data() {
      return {
        name: this.$store.state.user.staffName,
        isStatusCheckModalShow: false,
        companyName:'',//公司名称
        hospitalName:'',//医院名称
        departmentName:'',//科室名称
        avatar:''
      }
    },
    created(){
      this.avatar = this.$store.getters.avatar
      getUserProfile().then(res => {
        this.companyName = res.data.staff?.companyName
        this.hospitalName = res.data.staff?.hospitalName
        // this.departmentName = res.data.staff.departmentName
        this.$store.dispatch('setOauthId', res.data.staff.oauthId)
      })
    },
    computed: {
      windowHeight() {
        return uni.getSystemInfoSync().windowHeight - 50
      },
      isNurse(){
        return this.$auth.hasRoleOr(['head-nurse','nurse'])
      },
      version() {
        const versionName = manifest.versionName
        return `${versionName}.${suffix}`
      },
      isIos() {return systemInfo.osName === 'ios'}
    },
    methods: {
      handleToPwd() {
        this.$tab.navigateTo('/pages/mine/pwd')
      },
      handleToBindWechat() {
        this.$tab.navigateTo('/pages/mine/bind-wechat')
      },
      handleToBindApple() {
        this.$tab.navigateTo('/pages/mine/bind-apple')
      },
      handleLogout(){
        this.isStatusCheckModalShow = false
        this.$store.dispatch('LogOut').then(() => {
          this.$tab.reLaunch('/pages/login')
        })
      }
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #fff;
  }
  .relative {
    height: calc(100vh - 180rpx);
  }
  .info{
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .login-out-box {
    font-family: PingFang SC-Regular;
  }
</style>
